<template>
  <div class="app-drawer-layer" :id="id">
    <div v-show="visible"
      class="app-drawer-main"
      :class="{ active: visible }"
      :style="{ width: drawerSizes[drawerConfig.width] || drawerConfig.width }"
    >
      <div class="app-drawer-main-push-bottom" @click="visible = false">
        <a-icon type="right" style="font-size: 16px;"/>
      </div>
      <div class="app-drawer-main-header">
        <slot name="drawerHeader">
          <h3 class="fs-18 text-bold">{{ drawerConfig.title }}</h3>
          <div class="app-drawer-main-header-buttons" style="display: flex;">
            <a-button
              v-for="(item,index) in drawerConfig.headerButtons"
              :key="item.key || index"
              :type="item.type"
              :loading="item.loading || false"
              :disabled="item.disabled || false"
              :class="item.class"
              @click="handleButtonClick(item.method,item)"
            ><i class="iconfont" :class="item.iconCls" v-if="item.iconCls"></i>{{ $t(item.title) || '' }}</a-button>
            <div v-if="drawerConfig.subTitle">{{ drawerConfig.subTitle }}</div>
            <span class="app-drawer-main-header-buttons-close" :style="{ paddingTop:(drawerConfig.headerButtons.length>0?'5px':'0')}" @click="$emit('close')"><a-icon type="close" /></span>
          </div>
        </slot>
      </div>
      <div class="app-drawer-main-content">
        <component :is="drawerConfig.compName" :ref="drawerConfig.compName" v-bind="drawerConfig.vars"/>
      </div>
      <div class="app-drawer-main-footer" v-if="drawerConfig.footerButtons.length" v-show="drawerConfig.showFooter">
        <slot name="drawerFooter">
          <auth-button
            v-for="(item,index) in drawerConfig.footerButtons"
            :key="item.key || index"
            :auth="item.key"
            :type="item.type"
            :loading="item.loading || false"
            :disabled="item.disabled || false"
            :class="item.class"
            @click="handleButtonClick(item.method,item)"
          >
            <i class="iconfont" :class="item.iconCls" v-if="item.iconCls"></i>{{ $t(item.title) || '' }}
          </auth-button>
        </slot>
      </div>
    </div>
    <div class="app-drawer-layer-button" @click="visible = true">
      <a-icon type="left" style="font-size: 16px;"/>
    </div>
  </div>
</template>
<script>
import AuthButton from '@/components/AuthButton'

const initDrawerConfig = {
  // 右侧抽屉框要呈现的组件
  compName: null,
  title: '主标题',
  // 右侧抽屉框头部区域右边内容
  subTitle: '',
  // 右侧抽屉框底部区域的操作按钮配置
  footerButtons: [],
  width: 'medium',
  // 动态组件需要绑定的参数
  vars: null,
  // 调用右侧抽屉框的组件实例
  vueInstance: null,
  // 是否需要取消按钮
  hasCancelBtn: true,
  // 右侧抽屉框头部区域的操作按钮配置
  headerButtons: [],
  showFooter: true,
  createdTime: 8888,
  onClose: null
}
export default {
  name:'pageDrawer',
  components: {
    AuthButton
  },
  props:{
    //使用props，api方式需要通过渲染函数设置props,直接设置props 会提示props being mutated（指定parent）
    value: {
      type: Boolean,
      default: false
    },
    id: null,
    vars: null,
    drawerConfig : {
      type : Object,
      default : ()=>{
        return initDrawerConfig;
      }
    }
  },
  //暴露出去，外部可引用
  initDrawerConfig,
  data () {
    return {
      // value: '',
      // id: '',
      // drawerConfig: {...initDrawerConfig},
      drawerSizes: {
        huge: '88%',
        large: '75%',
        medium: '55%',
        small: '35%'
      }
    }
  },
  model: {
    prop: "visible", //绑定的值，通过父组件传递
    event: "change" //自定义事件名
  },
  computed: {
    visible:{
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);    // 触发
      }
    }
  },
  methods: {
    handleButtonClick (method, button) {
      // 是保存数据
      if (button.name === 'saveDataBtn') {
        this.getSaveData(method, button)
        return
      }
      if (button.name === 'cancelBtn') {
        // this.visible = false;
        this.$emit('close')
        return
      }
      method(this.$refs[this.drawerConfig.compName])
    },
    getSaveData (method, button) {
      const component = this.$refs[this.drawerConfig.compName]

      if (!component.getFormData) {
        console.error(component + '组件中写getFormData方法!!!!')
        return
      }

      component.getFormData().then(result => {
        const fnResult = method(result)
        if (!fnResult.then) {
          return
        }
        // eslint-disable-next-line no-param-reassign
        button.loading = true

        fnResult.then && fnResult.then((apiRes) => {
          this.$message.success(this.$t('successfullyOperation'))
          if(typeof button.callback === 'function'){
            if (button.callback(result, apiRes) === false) {
              return;
            }
          }
          this.$nextTick(() => {
            this.$emit('close')
            component.resetFields && component.resetFields()
          })
        }).catch(err => {
          console.log(err, '请求api接口失败原因')
        }).finally(() => {
          // eslint-disable-next-line no-param-reassign
          button.loading = false
        })
      }).catch(err => {
        console.log(err, 'yanzeng err')
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .app-drawer-layer {
    .app-drawer-main {
      top: 0;
      right: 0;
      height: calc(100% + 49px);
      z-index: 59;
      position: absolute;
      background: #fff;
      transform: translateX(120%);
      box-shadow: -2px 0 20px 0 rgba(0, 0, 0,0.2);
      transition: transform 0.4s ease;
      display: flex;
      flex-direction: column;
      justify-items: stretch;
      overflow: auto;
      &.active {
        transform: translateX(0);
      }
      .app-drawer-main-push-bottom {
        position: absolute;
        height: 100%;
        z-index: 1;
        width: 32px;
        font-size: 20px;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        cursor: pointer;
        color: #909aaa;
        &:hover {
          background-color: rgba(228, 231, 242, 0.4);
        }
      }
      .app-drawer-main-header {
        flex: 0 0 52px;
        padding-left: @drawerPl;
        padding-right: @drawerPr;
        background-color: #fff;
        border-bottom: 1px solid #dadee3;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .app-drawer-main-header-buttons-close {
            padding-left: 10px;
            align-items: center;
            cursor:pointer;
            &:hover
            {
             color: rgba(0, 0, 0, 0.45);
            }
            i {
            font-size: 15px;
            vertical-align: middle;
            }
        }
      }
      .app-drawer-main-content {
        flex: 1 0 0;
        overflow: hidden;
        position: relative;
      }
      .app-drawer-main-footer {
        flex: none;
        padding: 15px @drawerPl;
        background: #fafbfb;
        border-top: 1px solid #dadee3;
        .ant-btn+* {
          margin-left: 24px;
        }
      }
    }
    .app-drawer-layer-button {
      top: 50%;
      right: 0;
      width: 32px;
      font-size: 18px;
      height: 150px;
      line-height: 150px;
      text-align: center;
      position: absolute;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      box-shadow: 0 0 12px -1px rgb(0 0 0 / 15%);
      cursor: pointer;
      transform: translateY(-50%);
      z-index: 58;
    }
  }
</style>
